<template>
    <div class="wrapper">
        <el-drawer v-model="visible" :title="'test3-' + drawerType" direction="rtl" :destroy-on-close="true"
            @close="onClose" @clickoutside="handleNoClose">
            <template #default>
                <el-config-provider :locale="zhCn">
                    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                        class="demo-ruleForm" label-position="top">

                        <el-form-item v-for="(field, index) in formFields" :key="index" :label="field.label"
                            :prop="field.prop" :rules="[
                                {
                                    required: true,
                                    message: `请${field.type === 'select' ? '选择' : '输入'}${field.label}`,
                                    trigger: field.type === 'select' ? 'change' : 'blur',
                                },
                            ]">
                            <el-input v-if="field.type === 'VARCHAR'" v-model="ruleForm[field.prop]" />
                            <el-input v-if="field.type === 'TEXT'" v-model="ruleForm[field.prop]" type="textarea" />
                            <el-input-number v-if="field.type === 'INTEGER'" v-model="ruleForm[field.prop]" controls-position="right"
                                style="width: 100%;" />
                            <el-input-number v-if="field.type === 'DECIMAL'" v-model="ruleForm[field.prop]" controls-position="right"
                                :precision="2" style="width: 100%;" />
                            <el-date-picker v-if="field.type === 'DATE'" v-model="ruleForm[field.prop]" type="date"
                                placeholder="选择日期" :size="size" style="width: 100%;" />
                            <el-date-picker v-if="field.type === 'DATETIME'" v-model="ruleForm[field.prop]"
                                type="datetime" placeholder="选择日期和时间" style="width: 100%;" />
                            <el-select v-else-if="field.type === 'select'" v-model="ruleForm[field.prop]"
                                placeholder="请选择">
                                <el-option v-for="option in field.options" :key="option.value" :label="option.label"
                                    :value="option.value"></el-option>
                            </el-select>
                            <!-- 其他表单项 -->
                        </el-form-item>
                    </el-form>
                </el-config-provider>
            </template>

            <template #footer v-if="drawerType!='详情'">
                <div style="flex: auto">
                    <el-button type="primary" @click="submitForm(ruleFormRef)"
                        class="el-button--primary-i">提交</el-button>
                    <el-button type="info" @click="resetForm(ruleFormRef)">重置</el-button>
                </div>
            </template>

        </el-drawer>
    </div>
</template>

<script setup>
import { ref, defineExpose } from "vue";
import axios from "axios";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { fetchListTableData } from "@/api/get-data.js";
import { useRoute } from "vue-router";
import pinia from "@/store/pinia";
import { useStore } from "@/store/lowCode.js";
const lowCodeStore = useStore(pinia);
const route = useRoute();

const visible = ref(false);
const drawerType = ref(""); // Drawer名称
const ruleFormRef = ref(); // 表单id
const ruleForm = ref({}); // 字段值
const formFields = ref([]);

const submitFormAjax = async (modelId) => {
    let url;
    if (drawerType.value === "编辑") {
        url = "/lowcode/module/custom/g";
    } else if (drawerType.value === "新增") {
        url = "/lowcode/module/custom/z";
    }
    let submitFormRes = await axios
        .post(url, {
            "id": modelId,
            "fieldsDataList": [ruleForm.value]
        })
        .then((submitFormRes) => [null, submitFormRes])
        .catch((err) => [err, null]);

    console.log("预览：");
    console.log(submitFormRes);

    if (!submitFormRes[1]) {
        console.log(submitFormRes[1].data.message);
        ElMessage({
            message: submitFormRes[1].data.message,
            type: "error",
        });
        return false;
    }

    submitFormRes = submitFormRes[1];
    console.log(submitFormRes.data.data);

    fetchListTableData(route.params.modelId, lowCodeStore.listAllData.currentPage, lowCodeStore.listAllData.pageSize);
    visible.value = false;
}

const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            console.log("submit!");
            console.log("提交的数据：");
            console.log(ruleForm.value);
            submitFormAjax(route.params.modelId);
        } else {
            console.log("error submit!");
            return false;
        }
    });
};

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
};

const onClose = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
};

const handleNoClose = (done) => {
    console.log("done:");
    console.log(typeof done);
}

defineExpose({
    visible,
    drawerType,
    ruleForm,
    formFields
})
</script>

<style lang="less" scoped>
.wrapper /deep/ .el-form-item__error {
    left: auto !important;
    right: 60px !important;
    top: 25% !important;
}
</style>